<template>
    <div>
        <!-- <van-cell title="审批流程" value="收起" /> -->
        <h3 class="step-title">
            <p>审批流程</p>
            <span @click="showStepList" v-show="showStep">收起</span>
            <span @click="showStepList" v-show="!showStep">展开</span>
        </h3>
        <transition name="slide-fade">
        <ul class="step-list" v-show="showStep">
            <li class="step-item" v-for="(item,index) in stepData" :key="index">
                <h4 class="step-item-title">
                    <!-- <i> 1 </i> -->
                    <img :src="stepIcon1" v-if="item.status==1" alt="审批流">
                    <img :src="stepIcon2" v-if="item.status==2" alt="审批流">
                    <img :src="stepIcon3" v-if="item.status==3" alt="审批流">
                    <img :src="stepIcon4" v-if="item.status==4" alt="审批流">
                    <span>{{item.stepName}}</span>
                    <em v-if="item.addName==1" @click="showPopup(item,index)"> + </em>
                </h4>
                <div class="step-item-content">
                    <p class="name-time">
                        <span class="stop-names">{{item.name}}</span>
                        <span>{{item.time}}</span>
                    </p>
                    <p class="step-item-opinion">{{item.desc}}</p>
                </div>
            </li>
        </ul>
        </transition>
        <van-action-sheet v-model="showPopups" :round="false" :safe-area-inset-bottom="true" close-icon="cross" title="选择审批人">
            <div class="content">
                <van-radio-group v-model="radioResult" v-if="showSelect" @change="changeRadio">
                    <van-cell-group>
                        <van-cell :title="item.name" clickable @click="radio = 'item.name'"  v-for="item in radioList" :key="item.value">
                            <van-radio slot="right-icon" shape="square" :name="item.name" />
                        </van-cell>
                    </van-cell-group>
                </van-radio-group>
                <van-checkbox-group v-model="checkboxResult" v-else @change="changeCheckbox">
                    <van-cell-group>
                        <van-cell
                        v-for="(item, index) in checkboxList"
                        clickable
                        :key="item.value"
                        :title="item.name"
                        @click="toggle(index)"
                        >
                        <van-checkbox slot="right-icon" :name="item.value" ref="checkboxes" />
                        </van-cell>
                    </van-cell-group>
                </van-checkbox-group>
                <div class="selected-button">
                    <p v-if="showSelect">单选：{{peopleRadio}}人</p>
                    <p v-else>多选：{{peopleCheckbox}}人</p>
                    <van-button type="info" @click="selectedPeople">确认</van-button>
                </div>
            </div>
        </van-action-sheet>
    </div>
</template>
<script>
export default {
    data(){
        return {
            showStep:true,
            showPopups:false,
            radioList:[
                {name:'罗小梅1',value:'1',type:true},
                {name:'罗小梅2',value:'2',type:false},
                {name:'罗小梅3',value:'3',type:false},
                {name:'罗小梅4',value:'4',type:false},
                {name:'罗小梅5',value:'5',type:false},
            ],
            radioResult:'',
            showSelect:true,
            checkboxList: [
                {name:'杨楚璇1',value:'1',type:true},
                {name:'杨楚璇2',value:'2',type:false},
                {name:'杨楚璇3',value:'3',type:false},
                {name:'杨楚璇4',value:'4',type:false},
                {name:'杨楚璇5',value:'5',type:false},
                {name:'杨楚璇6',value:'6',type:true},
                {name:'杨楚璇7',value:'7',type:true},
            ],
            checkboxResult: [],
            index:null,
            stepIcon1:require('@/assets/images/step1.png'),
            stepIcon2:require('@/assets/images/step2.png'),
            stepIcon3:require('@/assets/images/step3.png'),
            stepIcon4:require('@/assets/images/step4.png'),
            

        }
    },
    props:{
        stepData:{
            type:Array,
            default:()=>[]
        }
    },
    computed:{
        //是否单选中人
        peopleRadio:function(){
            return this.radioResult?1:0;
        },
        //是否多选中人
        peopleCheckbox:function(){
            return this.checkboxResult.length;
        }
    },
    mounted(){
        this.initRadioResult(this.radioList)
        this.initCheckboxResult(this.checkboxList)
    },
    methods:{
        //是否展开审批流
        showStepList(){
            this.showStep = !this.showStep;
        },
        //是否显示选择审批流
        showPopup(obj,index){
            this.showPopups = true;
            this.index = index;
            let ind = this.stepData[this.index].name.indexOf(',');
            ind>0?this.stepData[this.index].name = this.stepData[this.index].name.slice(0,ind):null;
            if(obj.addType == '1'){
                this.showSelect = true;
            }else{
                this.showSelect = false;
            }
        },
        //多选点击是否选中
        toggle(index) {
            this.$refs.checkboxes[index].toggle();
        },
        //单选按钮切换
        changeRadio(e){
            console.log(e)
        },
        //多选按钮切换
        changeCheckbox(arr){
            console.log(arr);
            this.checkboxResult.concat(arr);
        },
        //提交选中的审批人
        selectedPeople(){
            if (this.stepData[this.index].addType == '1') {
                this.stepData[this.index].name +=','+this.radioResult;
            } else {
                if (this.checkboxResult.length) {
                     var str='';
                    for (var i = 0; i < this.checkboxResult.length; i++) {
                        var cur = this.checkboxResult[i];
                        str +=','+this.checkboxList[cur-1].name
                    }
                    this.stepData[this.index].name +=str;
                }
            }
            this.$emit('updateStepData',this.stepData)
            this.showPopups = false;
        },
        //初始化复选框
        initCheckboxResult(arr){
            for (let i = 0; i < arr.length; i++) {
                const cur = arr[i];
                if(cur.type){
                    this.checkboxResult.push(cur.value)
                }
            }
        },
        //初始化单选框
        initRadioResult(arr){
            for (let i = 0; i < arr.length; i++) {
                const cur = arr[i];
                if(cur.type){
                    this.radioResult=cur.name;
                }
            }
        }
    }
}
</script>
<style lang="less" scoped>
.step-title{
    width: 100%;
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    box-sizing: border-box;
    p{
        font-size: 15px;
        font-weight: bold;
        color: #333;
        flex: 3;
    }
    span{
        flex: 1;
        font-size: 13px;
        color: #999;
        text-align: right;
        cursor: pointer;
    }
}
.step-list{
    width: 100%;
    height: auto;
    background-color: #fff;
    padding: 15px;
    box-sizing: border-box;
    .step-item{
        width: 100%;
        height: auto;
        border-left: 1px solid #ddd;
        padding-bottom: 10px;
        .step-item-title{
            position: relative;
            font-weight: normal;
            img{
                width: 16px;
                height: 16px;
                text-align: center;
                line-height: 16px;
                border-radius: 50%;
                position: absolute;
                left: -8px;
                top: 0;
                background-color: #ccc;
                color: #eee;
            }
            span{
                margin-left: 15px;
                font-size: 14px;
            }
            em{
                width: 18px;
                height: 18px;
                background-color: #f5f5f5;
                color: #999;
                text-align: center;
                line-height: 16px;
                border: 1px solid #ddd;
                border-radius: 50%;
                position: absolute;
                top: 0;
                right: 0;
                cursor: pointer;
            }
        }
        .step-item-content{
            width: 100%;
            height: auto;
            background-color: #f5f5f5;
            padding: 0 5px 5px 15px;
            margin-top: 10px;
            box-sizing: border-box;
            .name-time{
                width: 100%;
                height: auto;
                padding: 5px 0;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;
                overflow: hidden;
                white-space: normal;
                word-break: break-word;
            }
        }
    }
    .step-item:last-child{padding-bottom: 0;}
}
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .3s ease;
//   transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateY(-10px);
  opacity: 0;
}
.content{
    height: 400px;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;
}
.van-action-sheet{
    max-height: 100%;
    top: 0;
}
.van-action-sheet__close{right: inherit; left: 0;}
.selected-button{
    width: 100%;
    height: 50px;
    padding: 10px 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
}
</style>